<template>
    <div class="drawList-box">
        <my-header :title="title"></my-header>

        <img src="https://img5.jianke.com/mall/vmall/index/201903/be0b7d678e0d4b27aa4fdaf9049c24a7.jpg?imageMogr2/format/jp2" alt="">

        <!-- 1 -->
        <div class="content">
            <img src="https://img5.jianke.com/mall/vmall/index/201812/962ce7232cd54952aa02b5eedb540496.jpg?imageMogr2/format/jp2" alt="">
            <div class="recommend-list">
                <div class="rl-item" v-for="(value, index) in moblie5List" :key="index">
                    <router-link :to="'/product/' + value.productCode">
                        <div class="wrap">
                            <img :src="value.productImageUrl" alt="">
                            <div class="rl-text">
                                <span class="name">{{ value.productName }}</span>
                                <span class="info">{{ value.introduction }}</span>
                                <p class="list-price">
                                    <span class="price-left">
                                        <em>￥</em>
                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                    </span>
                                    <span class="price-right">立即购买</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </div>
                <!-- 公有组件 -->
                <man-swiper :num="1"></man-swiper>
            </div>
        </div>

        <div class="content1">
            <img src="https://img5.jianke.com/mall/vmall/index/201812/5b7a059a665f4d3d985d7856845c9443.jpg?imageMogr2/format/jp2" alt="">
            <!-- 2 -->
            <div class="recommend-list">
                <div class="rl-item" v-for="(value, index) in moblie5List1" :key="index">
                    <router-link :to="'/product/' + value.productCode">
                        <div class="wrap">
                            <img :src="value.productImageUrl" alt="">
                            <div class="rl-text">
                                <span class="name">{{ value.productName }}</span>
                                <span class="info">{{ value.introduction }}</span>
                                <p class="list-price">
                                    <span class="price-left">
                                        <em>￥</em>
                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                    </span>
                                    <span class="price-right">立即购买</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 3 -->
            <div class="recommend-list">
                <div class="rl-item" v-for="(value, index) in moblie5List2" :key="index">
                    <router-link :to="'/product/' + value.productCode">
                        <div class="wrap">
                            <img :src="value.productImageUrl" alt="">
                            <div class="rl-text">
                                <span class="name">{{ value.productName }}</span>
                                <span class="info">{{ value.introduction }}</span>
                                <p class="list-price">
                                    <span class="price-left">
                                        <em>￥</em>
                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                    </span>
                                    <span class="price-right">立即购买</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 4 -->
            <div class="recommend-list">
                <div class="rl-item" v-for="(value, index) in moblie5List3" :key="index">
                    <router-link :to="'/product/' + value.productCode">
                        <div class="wrap">
                            <img :src="value.productImageUrl" alt="">
                            <div class="rl-text">
                                <span class="name">{{ value.productName }}</span>
                                <span class="info">{{ value.introduction }}</span>
                                <p class="list-price">
                                    <span class="price-left">
                                        <em>￥</em>
                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                    </span>
                                    <span class="price-right">立即购买</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
            <img src="https://img5.jianke.com/mall/vmall/index/201812/d3ad11d6e1b3431dbb04366f5ab92123.jpg?imageMogr2/format/jp2" alt="">
            <!-- 5 -->
            <div class="recommend-list">
                <div class="rl-item" v-for="(value, index) in moblie5List4" :key="index">
                    <router-link :to="'/product/' + value.productCode">
                        <div class="wrap">
                            <img :src="value.productImageUrl" alt="">
                            <div class="rl-text">
                                <span class="name">{{ value.productName }}</span>
                                <span class="info">{{ value.introduction }}</span>
                                <p class="list-price">
                                    <span class="price-left">
                                        <em>￥</em>
                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                    </span>
                                    <span class="price-right">立即购买</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 6 -->
            <div class="recommend-list">
                <div class="rl-item" v-for="(value, index) in moblie5List5" :key="index">
                    <router-link :to="'/product/' + value.productCode">
                        <div class="wrap">
                            <img :src="value.productImageUrl" alt="">
                            <div class="rl-text">
                                <span class="name">{{ value.productName }}</span>
                                <span class="info">{{ value.introduction }}</span>
                                <p class="list-price">
                                    <span class="price-left">
                                        <em>￥</em>
                                        {{ parseInt(value.productPrice/100) + '.00' }}
                                    </span>
                                    <span class="price-right">立即购买</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
            <man-swiper :num="2"></man-swiper>
        </div>
    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader.1'
import manSwiper from './man-swiper'
import {mapActions, mapGetters} from 'vuex'

export default {
    data() {
        return {
            title: '肝病艾滋',
            moblie5List: [],
            moblie5List1: [],
            moblie5List2: [],
            moblie5List3: [],
            moblie5List4: [],
            moblie5List5: [],
            arr: [],
        }
    },
    components: {
        myHeader,manSwiper
    },
    methods: {
        // onClick(index, title) {
        //     switch(title) {
        //         case '阳痿早泄':
        //             return this.arr = this.moblie5List;
        //         case '肾虚肾亏':
        //             return this.arr = this.moblie5List1;
        //         case '前列腺炎':
        //             return this.arr = this.moblie5List2;
        //         case '肾炎肾病':
        //             return this.arr = this.moblie5List3;
        //         case '不育':
        //             return this.arr = this.moblie5List4;
        //     }

        // },
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('155918,3041,14978,672070');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('512554,222392');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('852298,158103');
        this.moblie5List2 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('854612,781538');
        this.moblie5List3 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('813218,781555');
        this.moblie5List4 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('813217,781553');
        this.moblie5List5 = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        document.querySelector('.van-icon-arrow-left').style.color = '#ffffffcc';
        
        document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        document.querySelector('.van-hairline--bottom').style.background = '#141A28';
        document.querySelector('.van-hairline--bottom').style.opacity = '0.9'

        // 获取滚动距离
        window.addEventListener('scroll', this.handleScroll)
        
    }
}
</script>

<style lang="scss" scoped>
    @import 'Css/common-clounm.scss';

    .van-nav-bar {
        z-index: 9999 !important;
    }
    .van-tabs--line .van-tabs__wrap {
        height: .46rem !important;
    }

    a {
        color: #333;
    }

    .recommend-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #f5f5f5;
        padding: 0rem 0.05rem;
        .wrap {
            background: #fff !important;
        }
    }

    img {
        width: 100%;
        vertical-align: middle;
    }
</style>

